<template>
	<div>
		<div class="nav_img">
			<img src="../../public/img/bot/prev.png" alt="" @click="fanhui">
			<span>确认订单</span>
			<span class="p1">&#xe614;</span>
		</div>
		<div class="dingwei">
			<p><span class="p2">&#xe611;</span>请添加一个收货地址 <span class="p3">&#xe6e6;</span></p>
		</div>
		<div class="song">
			<p>送达时间</p>
			<div class="song_right">
				<p>尽快送达 | 预计 02:11</p>
				<span class="feng">蜂鸟专送</span>
			</div>
		</div>
		<div class="zhifu">
			<p>支付方式<span class="p3">&#xe6e6;</span></p>
			<p style="color: #999999;">红包<span class="p3">暂时只在饿了么 APP 中支持</span></p>
		</div>
		<div class="shop">
			<ul>
				<li style="font-size: 25px;padding: 8px 10px;">{{s}}</li>
				<li  v-for="(item,index) in car" :key='index'>{{item.name}} <span class="a1">￥ {{ item.price * item.count}}</span> <span class="a2">× {{item.count}}</span></li>
			</ul>
			<div class="pei">配送费 ￥ {{pei}}</div>
		</div>
		<div class="bottom">
			<p>订单备注</p>
			<p>发票抬头</p>
		</div>
		<div class="but">
			<div class="left">待支付 ¥{{car[0].price * $store.getters.getcount + pei}}</div>
			<div class="right" @click="godan">确认下单</div>
		</div>
	</div>
</template>

<script>
	export default{
		data:function(){
			return{
				car:[],
				s:'',
				pei:5
			}
		},
		methods:{
			godan() {
				this.$router.push("/zhifu");
			},
			fanhui() {
				this.$router.go(-1);
			}
		},
		created() {
			this.car = JSON.parse(sessionStorage.getItem('car'));
			this.s = sessionStorage.getItem('shopName');
			this.datas.push(JSON.parse(sessionStorage.getItem('nameImg')));
			if(JSON.parse(sessionStorage.getItem('foodAll'))) {
			this.foods = JSON.parse(sessionStorage.getItem('foodAll'));
			}
			window.console.log(this.foods);
			this.all = this.pei + this.can + this.foods.money;
			// window.console.log(this.foods[0].five);
			// window.console.log(JSON.parse(sessionStorage.getItem("aaa")));
			if (JSON.parse(sessionStorage.getItem("aaa"))) {
				this.is = false;
				this.slow.push(JSON.parse(sessionStorage.getItem("aaa")));
			}
		}
	}
</script>

<style scoped>
	@font-face {
	  font-family: 'iconfont';  /* project id 1572186 */
	  src: url('http://at.alicdn.com/t/font_1572186_8qtr9ag191a.eot');
	  src: url('http://at.alicdn.com/t/font_1572186_8qtr9ag191a.eot?#iefix') format('embedded-opentype'),
	  url('http://at.alicdn.com/t/font_1572186_8qtr9ag191a.woff2') format('woff2'),
	  url('http://at.alicdn.com/t/font_1572186_8qtr9ag191a.woff') format('woff'),
	  url('http://at.alicdn.com/t/font_1572186_8qtr9ag191a.ttf') format('truetype'),
	  url('http://at.alicdn.com/t/font_1572186_8qtr9ag191a.svg#iconfont') format('svg');
	}
	.pei {
		margin-left: 10px;
	}
	.nav_img{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		background: #3190e8;
		padding: 5px 0;
		overflow: hidden;
		text-align: center;
		/* border-bottom: 2px solid #FFFFFF; */
	}
	.nav_img img{
		width: 7%;
		float: left;
	}
	.nav_img span{
		color: #FFFFFF;
		font-size: 15px;
		vertical-align: middle;
		margin-left: -10px;
	}
	.nav_img .p1{
		font-family: 'iconfont';
		font-size: 20px;
		color: #FFFFFF;
		float: right;
		margin-right: 10px;
	}
	.dingwei{
		padding: 0 10px;
		margin-top: 35px;
		background: #FFFFFF;
	}
	.dingwei p{
		line-height: 70px;
		font-family: 'iconfont';
		font-size: 12px;
	}
	.dingwei .p2{
		color: #3190E9;
		margin-right: 10px;
	}
	.dingwei .p3{
		float: right;
		
	}
	.song{
		position: relative;
		margin-top: 10px;
		background: #FFFFFF;
		line-height: 80px;
		border-left: 4px solid #3190E8;
	}
	.song p{
		padding: 0 14px;
		font-size: 16px;
	}
	.song_right{
		position: absolute;
		right: 0;
		top: 15px;
	}
	.song_right p{
		line-height: 20px;
		font-size: 14px;
		color: #3190E8;
	}
	.song_right .feng{
		font-size: 10px;
		display: block;
		text-align: center;
		color: #FFFFFF;
		line-height: 20px;
		background: #3190E8;
		border-radius: 5px;
		width: 50px;
		float: right;
		margin-right: 0.625rem;
		margin-top: 10px;
	}
	.zhifu{
		background: #FFFFFF;
		padding: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.zhifu p{
		font-size: 14px;
		line-height: 40px;
	}
	.zhifu .zhi1{
		float: right;
		font-size: 12px;
	}
	.zhifu .p3{
		float: right;
		font-family: 'iconfont';
		font-size: 12px;
	}
	.shop{
		background: #FFFFFF;
		margin-bottom: 10px;
	}
	.shop ul li{
		width: 100%;
		padding: 3px 10px;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 13px;
		color: #666666;
		line-height: 30px;
	}
	.a1{
		float: right;
		margin-right: 10px;
	}
	.a2{
		float: right;
		margin-right: 10px;
		color: #f60;
	}
	.bottom{
		margin-bottom: 50px;
		background: #FFFFFF;
	}
	.bottom p{
		line-height: 30px;
		font-size: 15px;
		padding: 0 10px;
		color: #666666;
	}
	.but{
		position: fixed;
		left: 0;
		right: 0;
		bottom:0;
	}
	.but .left{
		line-height: 40px;
		color: #FFFFFF;
		background: #000000;
		font-size: 15px;
		padding-left: 10px;
	}
	.but .right{
		position: fixed;
		right: 0;
		bottom: 0;
		background: #56d176;
		line-height: 40px;
		font-size: 15px;
		color: #FFFFFF;
		padding: 0 10px;
	}
</style>
